<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>cloudstack web</title> 
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<BODY align="center" valign="center">  
<DIV class="box">
<h3><strong>Cloudstack 添加intstance
</strong>
<hr></hr>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="/instance_list">实例</a></li>
<li><a href="#contact">状态</a></li>
</ul>
<hr></hr>
<hr>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
           $("#province").change(function(){
               $("#province option").each(function(i,o){
                   if($(this).attr("selected"))
                   {
                       $(".ips").hide();
                       $(".ips").attr("name","");
                       $(".ips").eq(i).show();
                       $(".ips").eq(i).attr("name","ips");
                   }
               });
           });
           $("#province").change();
       });
</script>

</head>
<body>
<form action="/search/" method="get" name="form1" id="form1">
<!-- sdfasf  -->
      实例名称：<input type="text" name="instance_name" />
   </p>
   ip地址：<select name="networkid" id="province">
   {% for nt in networks_list %}
       <option value = {{ nt.id }}>  {{ nt.display_text }} </option>
   {% endfor %}
   </select>
   
   {% for nt in networks_list %}
	<select name={{ nt.id }} class="ips" >
	  {% for i  in freeip %}
	  	{% if i.source_network_id == nt.id %}
  		<option value ={{ i.public_ip_address }} >{{ i.public_ip_address }}</option>
  		{% endif %}
  	  {% endfor %}
	</select>
   {% endfor %}
   </p>
<h3>数据中心</h3>
<table width="1200" border="0" cellspacing="1" cellpadding="0"  class="hovertable" > 
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
  	<td></td>
  	<td><strong>数据中心ID</strong></td>
    <td><strong>名称</strong></td>
    <td><strong>网络类型</strong></td>
    <td><strong>来宾网络范围</strong></td>
    <td><strong>本地存储是否启用</strong></td>
  </tr>
  {% for zone in zones %}
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td><input type="radio" name="zone_id" value={{zone.id}} /></td>
    <td>{{zone.id}}</td>
    <td>{{zone.NAME}}</td>
    <td>{{zone.networktype}}</td>
    <td>{{zone.guest_network_cidr}}</td>
    <td>{{zone.is_local_storage_enabled}}</td>

  </tr>
  {% endfor %}
</table>
</P>

<h3>模板</h3>
<table width="1200" border="0" cellspacing="1" cellpadding="0"  class="hovertable" > 
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td></td>
    <td><strong>模板ID</strong></td>
    <td><strong>名称</strong></td>
    <td><strong>用户类型</strong></td>
    <td><strong>虚拟格式</strong></td>
  </tr>
  {% for template in templates %}
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td><input type="radio" name="template_id" value={{template.id}} /></td>
    <td>{{template.id}}</td>
    <td>{{template.NAME}}</td>
    <td>{{template.TYPE}}</td>
    <td>{{template.FORMAT}}</td>
  </tr>
  {% endfor %}
</table>
  </p>
<h3>计算方式</h3>
<table width="1200" border="0" cellspacing="1" cellpadding="0"  class="hovertable" > 
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td></td>
    <td><strong>计算方式ID</strong></td>
    <td><strong>名称</strong></td>
    <td><strong>CPU核数</strong></td>
    <td><strong>CPU主频</strong></td>
    <td><strong>内存</strong></td>
    <td><strong>主机标签</strong></td>
    <td><strong>网络QoS</strong></td>
    <td><strong>VM_type</strong></td>
    <td><strong>本地存储</strong></td>
    <td><strong>HA启用</strong></td>
  </tr>
  {% for computes in compute_offerings %}
  <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td><input type="radio" name="compute_id" value={{computes.id}} /></td>
    <td>{{computes.id}}</td>
    <td>{{computes.NAME}}</td>
    <td>{{computes.cpu}} 核</td>
    <td>{{computes.speed}} Hz</td>
    <td>{{computes.ram_size}} M</td>
    <td>{{computes.host_tag}}</td>
    {% if computes.nw_rate == None %}
      <td>25M</td>
    {% else %}
   	  <td>{% widthratio computes.nw_rate 8 1 %} M</td>
    {% endif %}
    <td>{{computes.vm_type}}</td>
    {% if computes.use_local_storage == 1 %}
    <td>启用</td>
    {% else %}
    <td>未启用</td>
    {% endif %}
    {% if computes.ha_enabled == 1 %}
     <td>启用</td>
    {% else %}
    <td>未启用</td>
    {% endif %}
  </tr>
  {% endfor %}
</table>
</P>

   <input type="submit" name="button" id="button" value="完成" />   
   
</form>
</body>
</html>